<template>
    <div class="app">
        <my-navbar title="送货消息"></my-navbar>
        <list>
            <cell>
                <div class="message_item" v-for="item in logistics">
                    <div>
                        <text class="message_time">{{item.sendDate}}</text>
                    </div>
                    <div class="message_box" @click="orderClick(item)">
                        <div class="box_head">
                            <text class="message_box_tittle">{{item.msgTitle}}</text>
                            <text class="infoIcon">&#xe61f;</text>
                        </div>
                        <div class="box_body">
                            <div class="photo_content">
                                <image style="width:150px;height:150px"
                                       :src="item.msgContent.itemList[0].thumbnail"></image>
                            </div>
                            <div class="box_body_message">
                                <text class="message_text"> {{item.msgContent.title}}</text>
                                <text class="message_sn">订单编号:{{item.msgContent.sn}}</text>
                            </div>
                        </div>
                    </div>
                </div>
            </cell>
			<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
				<loading-indicator class="indicator"></loading-indicator>
			</loading>
        </list>
    </div>
</template>

<script>
    import {list, markAsRead, unReadCount, update} from "../../../api/msgPush"
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    export default {
        data() {
            return {
                msgKey: 'msg-shipping',
                logistics: []
            }
        },
        created() {
            this.loadMsgList()
            this.initIconFont()
        },
        components: {
            myNavbar
        },
        methods: {
            loadMsgList() {
                list({
                        msgKey: this.msgKey,
                        mchId: this.getGlobalData().mchId,
                    }
                ).then(res => {
                    res.data.data.forEach(item => {
                        item.sendDate = this.formatTime(item.sendDate)
                        item.msgContent = JSON.parse(item.msgContent)
                        if (item.readStatus == 2) {
                            item.readStatus = 1
                        }

                    })
                    this.logistics = res.data.data
                    markAsRead({
                        msgKey: this.msgKey,
                    }).then(res => {
                    })
                })
            },
            orderClick(id){
                console.log(id)
                var _this = this
                if (id != null){
                    eeui.openPage({
                            params: id,
                            url: 'root://pages/order/shippingDetails.js',
                            statusBarType: 'immersion',
                            statusBarStyle: false
                        },
                        (result) => {
                            if (result.status == 'stop') {
                                storage.getItem('distribution', event => {
                                    if (event.data == 'true') {
                                        _this.refreshClick()
                                    }
                                })
                                storage.removeItem('distribution', event => {

                                })
                            }
                        }
                    );
                }

            }
        }
    }
</script>

<style scoped>
    .app {
        flex: 1
    }

    .app,
    body {
        background-color: #e6e6e6;
    }


    .message_item {
        display: flex;
        width: 750px;
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
    }

    .message_time {
        text-align: center;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.3;
    }

    .message_box {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        padding: 30px;
        box-sizing: border-box;
        margin-top: 30px;
    }

    .box_head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .message_box_tittle {
        font-size: 28px;
        font-weight: 400;
        justify-content: center;
        align-items: center;
        display: flex;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }


    .infoIcon {
        color: rgba(42, 42, 54, 0.3);
        font-family: iconfont2;
        font-size: 22px;
    }

    .box_body {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
    }

    .photo_content {
        width: 150px;
        height: 150px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
    }

    .box_body_message {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
    }

    .message_text {
        width: 485px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        /* min-height: 59px; */
    }

    .message_sn {
        /* height: 23px; */
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-top: 20px;
    }
</style>
